<template>
  <div class="index">
    <div class="footer"></div>
    <p>行业受益年龄分布</p>
    <echart :option="option"></echart>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: {
        tooltip: {
          trigger: "item"
        },
        legend: {
          y: "88%",
          left: "center",
          itemWidth: 8,
          itemHeight: 8,
          textStyle: {
            color: "rgba(255, 255, 255, 0.5)",
            fontSize: 12 //字体大小
          }
        },
        series: [
          {
            name: "年龄分布",
            type: "pie",
            radius: ["30%", "60%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            // 中间的文字
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: "0岁以下" },
              { value: 735, name: "20—29岁" },
              { value: 580, name: "30-39岁" },
              { value: 484, name: "40-49岁" },
              { value: 300, name: "50岁以上" }
            ]
          }
        ]
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.index {
  position: relative;
  p {
    width: 100%;
    font-size: 20px;
    text-align: center;
    position: absolute;
    top: 8px;
    left: 0;
  }
  .leftBotEchart {
    width: 100%;
    height: 100%;
  }
  // 使用伪元素做边框
  .footer {
    &::before {
      content: "";
      width: 15px;
      height: 15px;
      border-bottom: 1px solid #02a6b5;
      border-left: 1px solid #02a6b5;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    &::after {
      content: "";
      width: 15px;
      height: 15px;
      border-bottom: 1px solid #02a6b5;
      border-right: 1px solid #02a6b5;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
}
</style>